<template>
  <div>
    <Card>
			<Button style="margin: 10px 0;" type="primary" @click="createpod = true">设置pod创建配置</Button>
			<!-- 设置面板 -->
			<Modal v-model="createpod" title="设置pod创建配置" @on-ok="create" width="800"  class="gset">
				<div class="form-div">
						<label class="myLabel">弹性设置：</label>
						<Input v-model="additionalProperty " placeholder="请输入弹性设置" style="width: 200px" />
				</div>
        <div class="form-div">
						<label class="myLabel">api版本：</label>
						<Select v-model="apiVersion" style="width:200px" disabled="">
								<Option value="v1" selected='selected'>v1</Option>
						</Select>
				</div>
				<div class="form-div">
						<label class="myLabel">应用名称：</label>
						<Input v-model="appName" placeholder="请输入应用名称" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">实例端口：</label>
						<Input v-model="containerPort" placeholder="请输入实例端口" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">dns策略：</label>
						<Input v-model="dnsPolicy" placeholder="请输入dns策略" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">镜像地址：</label>
						<Input v-model="imageUrl" placeholder="请输入镜像地址" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">分类：</label>
						<Input v-model="kind" placeholder="请输入分类" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">限定处理器数量：</label>
						<Input v-model="limitCpu" placeholder="请输入限定处理器数量" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">限定内存使用率：</label>
						<Input v-model="limitMem" placeholder="请输入限定内存使用率" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">镜像拉取策略：</label>
						<Input v-model="pullPolicy" placeholder="请输入镜像拉取策略" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">请求处理器数量：</label>
						<Input v-model="requestCpu" placeholder="请输入请求处理器数量" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">请求内存：</label>
						<Input v-model="requestMem" placeholder="请输入请求内存" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">意外重启策略：</label>
						<Input v-model="restartPolicy" placeholder="请输入意外重启策略" style="width: 200px" />
				</div>
				<div class="form-div">
						<label class="myLabel">版本：</label>
						<Input v-model="version" placeholder="请输入版本" style="width: 200px" />
				</div>
				<div class="form-div" style="width:100%">
						<label class="myLabel">额外命令：</label>
						<Input v-model="command" type="textarea" placeholder="请输入额外命令,以逗号分隔" style="width: 585px" />
				</div>
    </Modal>
		<!-- 展示和修改面板 -->
		<Modal v-model="editpod"	:title="modalTitle"	@on-ok="edit" class="gset" width="800">
			<div class="form-div">
					<label class="myLabel">弹性设置：</label>
					<Input v-model="editadditionalProperty " placeholder="请输入弹性设置" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">api版本：</label>
					<Select v-model="editapiVersion" style="width:200px" disabled="">
							<Option value="v1" selected='selected'>v1</Option>
					</Select>
			</div>
			<div class="form-div">
					<label class="myLabel">应用名称：</label>
					<Input v-model="editappName" placeholder="请输入应用名称" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">实例端口：</label>
					<Input v-model="editcontainerPort" placeholder="请输入实例端口" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">dns策略：</label>
					<Input v-model="editdnsPolicy" placeholder="请输入dns策略" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">镜像地址：</label>
					<Input v-model="editimageUrl" placeholder="请输入镜像地址" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">分类：</label>
					<Input v-model="editkind" placeholder="请输入分类" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">限定处理器数量：</label>
					<Input v-model="editlimitCpu" placeholder="请输入限定处理器数量" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">限定内存使用率：</label>
					<Input v-model="editlimitMem" placeholder="请输入限定内存使用率" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">镜像拉取策略：</label>
					<Input v-model="editpullPolicy" placeholder="请输入镜像拉取策略" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">请求处理器数量：</label>
					<Input v-model="editrequestCpu" placeholder="请输入请求处理器数量" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">请求内存：</label>
					<Input v-model="editrequestMem" placeholder="请输入请求内存" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">意外重启策略：</label>
					<Input v-model="editrestartPolicy" placeholder="请输入意外重启策略" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div">
					<label class="myLabel">版本：</label>
					<Input v-model="editversion" placeholder="请输入版本" style="width: 200px" :disabled="editThis"/>
			</div>
			<div class="form-div" style="width:100%">
					<label class="myLabel">额外命令：</label>
					<Input v-model="editcommand" type="textarea" placeholder="请输入额外命令,以逗号分隔" style="width: 585px" :disabled="editThis"/>
			</div>
		</Modal>
			<Table :columns="columns" :data="tableData"></Table>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
					title: '应用名称',
					key: 'appName'
				},
        {
					title: '镜像地址',
					key: 'imageUrl'
				},
				{
					title: '限定处理器数量',
					key: 'limitCpu'
				},
        {
					title: '限定内存使用率',
					key: 'limitMem'
				},
				{
					title: '版本',
					key: 'version'
				},
        {
          title: '操作',
          key: 'handle',
          render: (h, params) => {
						return h('div', [
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.show(params.index)
											}
									}
							}, '查看'),
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.editshow(params.index)
											}
									}
							}, '修改')
						])
					}
        }
      ],
      tableData: [],
			createpod: false,
			editpod: false,
			additionalProperty: '',
			apiVersion: 'v1',
			appName: '',
			command: '',
			containerPort: '',
			dnsPolicy: '',
			imageUrl: '',
			kind: '',
			limitCpu: '',
			limitMem: '',
			pullPolicy: '',
			requestCpu: '',
			requestMem: '',
			restartPolicy: '',
			version: '',
			editadditionalProperty: '',
			editapiVersion: 'v1',
			editappName: '',
			editcommand: '',
			editcontainerPort: '',
			editdnsPolicy: '',
			editimageUrl: '',
			editkind: '',
			editlimitCpu: '',
			editlimitMem: '',
			editpullPolicy: '',
			editrequestCpu: '',
			editrequestMem: '',
			editrestartPolicy: '',
			editversion: '',
			editId: '',
			editThis: false,
			modalTitle: ''
    }
  },
  methods: {
		// 展示面板数据回调
		show (index) {
			this.editpod = true
			this.editThis = true
			this.modalTitle = 'pod配置详情'
			this.editadditionalProperty = this.tableData[index].additionalProperty
			this.editapiVersion = this.tableData[index].apiVersion
			this.editappName = this.tableData[index].appName
			this.editcommand = this.tableData[index].command
			this.editcontainerPort = this.tableData[index].containerPort
			this.editdnsPolicy = this.tableData[index].dnsPolicy
			this.editimageUrl = this.tableData[index].imageUrl
			this.editkind = this.tableData[index].kind
			this.editlimitCpu = this.tableData[index].limitCpu
			this.editlimitMem = this.tableData[index].limitMem
			this.editpullPolicy = this.tableData[index].pullPolicy
			this.editrequestCpu = this.tableData[index].requestCpu
			this.editrequestMem = this.tableData[index].requestMem
			this.editrestartPolicy = this.tableData[index].restartPolicy
			this.editversion = this.tableData[index].version
			this.editId = this.tableData[index].id
		},
		// 修改面板数据回调
		editshow (index) {
			this.editpod = true
			this.editThis = false
			this.modalTitle = 'pod配置修改'
			this.editadditionalProperty = this.tableData[index].additionalProperty
			this.editapiVersion = this.tableData[index].apiVersion
			this.editappName = this.tableData[index].appName
			this.editcommand = this.tableData[index].command
			this.editcontainerPort = this.tableData[index].containerPort
			this.editdnsPolicy = this.tableData[index].dnsPolicy
			this.editimageUrl = this.tableData[index].imageUrl
			this.editkind = this.tableData[index].kind
			this.editlimitCpu = this.tableData[index].limitCpu
			this.editlimitMem = this.tableData[index].limitMem
			this.editpullPolicy = this.tableData[index].pullPolicy
			this.editrequestCpu = this.tableData[index].requestCpu
			this.editrequestMem = this.tableData[index].requestMem
			this.editrestartPolicy = this.tableData[index].restartPolicy
			this.editversion = this.tableData[index].version
			this.editId = this.tableData[index].id
		},
		// 新建
		create () {
			this.$api.post(0, '/kuber/setConfigForPod',
			{
				additionalProperty: this.additionalProperty,
				apiVersion: this.apiVersion,
				appName: this.appName,
				command: this.command,
				containerPort: this.containerPort,
				dnsPolicy: this.dnsPolicy,
				imageUrl: this.imageUrl,
				kind: this.kind,
				limitCpu: this.limitCpu,
				limitMem: this.limitMem,
				pullPolicy: this.pullPolicy,
				requestCpu: this.requestCpu,
				requestMem: this.requestMem,
				restartPolicy: this.restartPolicy,
				version: this.version
			}, r => {
				this.getList()
			})
		},
		// 修改
		edit () {
			this.$api.post(0, '/kuber/editPodConfig',
			{
				additionalProperty: this.editadditionalProperty,
				apiVersion: this.editapiVersion,
				appName: this.editappName,
				command: this.editcommand,
				containerPort: this.editcontainerPort,
				dnsPolicy: this.editdnsPolicy,
				imageUrl: this.editimageUrl,
				kind: this.editkind,
				limitCpu: this.editlimitCpu,
				limitMem: this.editlimitMem,
				pullPolicy: this.editpullPolicy,
				requestCpu: this.editrequestCpu,
				requestMem: this.editrequestMem,
				restartPolicy: this.editrestartPolicy,
				version: this.editversion,
				id: this.editId
			}, r => {
				this.getList()
			})
		},
		// 获取表格数据
		getList () {
			this.$api.post(0, '/kuber/getConfigPage', { limit: 5, start: 1 }, r => {
				this.tableData = r.data.content
			})
		}
  },
  mounted () {
		this.getList()
  }
}
</script>

<style>
  label.myLabel{
		width:100px;
		display:inline-block;
		margin-right:15px;
		text-align: right;
	}
	div.gset div.form-div{
		margin-bottom:15px;
		float:left;
		width:50%
	}
	div.gset div:after{
		display: block;
		clear: both;
		content: "";
	}
</style>
